<template>
  <div class="users">
    <div class="wrap"><cump :navs="navs" /></div>
    <div class="center wrap">
      <div class="left">
        <div class="user">
          <img :src="headImg" alt="" />
          <p>
            <span>{{ nickName }}</span>
            <a href="#" @click.prevent="dete">退出</a>
          </p>
        </div>
        <h4><img src="../assets/img/transaction.png" alt="" />交易管理</h4>
        <ul>
          <li
            @click="goto('/user/Perseonal')"
            :class="{ active: $route.fullPath.includes('/user/Perseonal') }"
          >
            帐号管理
          </li>
          <li
            @click="goto('/user/Other')"
            :class="{ active: $route.fullPath.includes('/user/Other') }"
          >
            我的订单
          </li>
          <li
            @click="goto('/user/Cart')"
            :class="{ active: $route.fullPath.includes('/Cart') }"
          >
            购物车
          </li>
          <li
            @click="goto('/user/Other')"
            :class="{ active: $route.fullPath.includes('/user/Other') }"
          >
            消息通知
          </li>
          <li
            @click="goto('/user/Other')"
            :class="{ active: $route.fullPath.includes('/user/Other') }"
          >
            积分明细
          </li>
          <li
            @click="goto('/user/Other')"
            :class="{ active: $route.fullPath.includes('/user/Other') }"
          >
            积分攻略
          </li>
        </ul>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import cump from "@/components/cumb.vue";
export default {
  data() {
    return {
      navs: [
        {
          text: "首页",
          path: "/home",
        },
        {
          text: "个人中心",
          path: "/user",
        },
        {
          text: "账号管理",
          path: "/account",
        },
      ],
    };
  },
  components: {
    cump,
  },
  methods: {
    goto(path) {
      this.$router.push(path);
    },
    dete() {
      localStorage.removeItem("token");
      this.$router.push("/home");
    },
  },
  computed: {
    ...mapState({
      // 自定属性名: (state)=>state.user.xxxx
      nickName: (state) => state.user.nickName,
      headImg: (state) => state.user.headImg,
      coin: (state) => state.user.coin,
      cartTotal: (state) => state.user.cartTotal,
    }),
  },
};
</script>
<style lang="less" scoped>
.users {
  background: #f5f5f5;
  height: 1200px;
  .center {
    display: flex;
    height: 1200px;
    .left {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      padding-top: 40px;
      .user {
        text-align: center;
        img {
          width: 100px;
          height: 100px;
        }
        p {
          padding: 20px 0;
        }
      }
      h4 {
        height: 36px;
        font-size: 16px;
        font-family: SourceHanSansSC;
        font-weight: 400;
        color: #333333;
        line-height: 23px;
        padding-left: 20px;
        display: flex;
        align-items: center;
      }
      ul {
        padding-left: 20px;
        li {
          margin: 17px;
          cursor: pointer;
          font-size: 14px;
          &.active {
            color: #0a328e;
            border-left: 1px solid #0a328e;
            padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
